import { Component } from 'react'
import {View, ScrollView } from '@tarojs/components'
import LgButton from '../button'
import './index.scss'
import Taro from '@tarojs/taro'
import myEvent from '../../../utils/event'

interface LgMulitSeleProps {
    id: string,
    default?: number[],
    showText?: string,
    attr?: string,
    dataList?: any[],
    width?: number,
    changeSele: (index: number[], data?: any[]) => void,
    className?: string,
    style?: object,
    ref?: (value: any) => void
}
interface MulitSeleState {
    choIndex: number[],
    isShow: boolean
}
export default class LgMulitSele extends Component<LgMulitSeleProps, MulitSeleState> {
  constructor(props: LgMulitSeleProps) {
    super(props)
    this.openSele = this.openSele.bind(this);
    this.handSele = this.handSele.bind(this);
    this.closeSele = this.closeSele.bind(this);
    this.getlistSize = this.getlistSize.bind(this);
    this.getVal = this.getVal.bind(this);
    this.state = {
      choIndex: props.default || [] ,
      isShow: false
    }
  }
  setVal = index => {
    this.setState({choIndex: index});
  }
  getVal() {
    return this.state.choIndex;
  }
  // componentSho
  pageMsg = {width: 0, height: 0}
  domPosition = {top: "0", height:"0", width: "0"}
  hasGetBsize
  componentDidMount () {
    var that = this;
    myEvent.on("colseSele", () => {
      that.closeSele();
    });
    this.hasGetBsize = setTimeout(this.getlistSize, 100);
  }
  getlistSize() {
    this.hasGetBsize = false;
    var that = this;
    Taro.getSystemInfo({
      success: res => {
        that.pageMsg = {width: res.windowWidth, height: res.windowHeight};
        Taro.createSelectorQuery().select('#' + this.props.id).boundingClientRect(function(rect) {
          var pageMsg = that.pageMsg;
          // console.log(rect)
          var bottom = (rect && rect.bottom) ? rect.bottom : 0;
          var unit = "px";
          that.domPosition = {top: "auto", height: (pageMsg.height - bottom) + unit, width: pageMsg.width + unit}
        }).exec()
      }
    })
  }
  componentWillUnmount () {
    if (this.hasGetBsize) {
      clearTimeout(this.hasGetBsize);
    }
  }
  componentDidShow () {
  }

  componentDidHide () {}

  componentDidCatchError () {}

  oldData
  closeBorther
  openSele(e) {
    e.stopPropagation();
    var that = this;
    this.setState({isShow: !this.state.isShow}, function() {
      if (that.state.isShow) {
        that.oldData = new Array();
        that.oldData = that.oldData.concat(that.state.choIndex);
        that.closeBorther = true;
        myEvent.emit("colseSele", "");
      }
    });
  }
  closeSele() {
    if (this.state.isShow) {
      if (this.closeBorther) 
        this.closeBorther = false;
      else {
        var choIndex = new Array();
        choIndex = choIndex.concat(this.oldData);
        this.setState({isShow: false, choIndex: choIndex});
      }
    }
  }
  handSele(i, type) {
    var choIndex = this.state.choIndex;
    if (type) {
        var curIndex = choIndex.indexOf(i);
        choIndex.splice(curIndex, 1);
    } else {
        choIndex.push(i);
    }
    this.setState({choIndex: choIndex});
  }
  
  getHeight() {
    if (this.state.isShow) {
      return this.domPosition
    } else {
      return {height: 0, width: this.domPosition.width}
    }
  }
  stopProps(e) {
    e.stopPropagation();
  }
  surePage() {
    var choIndex = this.state.choIndex, choData = new Array();
    var dataList = this.props.dataList || [];
    for (let i = 0; i < choIndex.length; i ++) {
        choData.push(dataList[i]);
    }
    this.setState({isShow: false});
    this.props.changeSele(choIndex, choData);
  }
  render () {
    const props = this.props, that = this; 
    var className = props.className || '';
    const {choIndex, isShow} = this.state;
    var dataList = this.props.dataList || [];
    var nameWidth = props.width ? 'width:' + Taro.pxTransform(props.width) : "";
      if (isShow && dataList.length) {
        className += ' lg_sele_muilt_show';
      }
      return (
        <View className={'lg_sele_muilt ' + className} style={props.style || {}}>
            <View className='lg_sele_muilt_name oneline' id={props.id} onClick={this.openSele} style={nameWidth} >
              {props.showText || "全部"}
            </View>
            <View className='lg_sele_muilt_warp' style={this.getHeight()} onClick={this.closeSele}>
              <View className='lg_sele_muilt_content'>
                <View className='lg_sele_muilt_list' onClick={this.stopProps.bind(this)}>
                    <ScrollView className='lg_sele_muilt_item_warp' scrollTop={Math.random()}>
                    {
                        dataList.map((o, i) => {
                            var hasCho = choIndex.indexOf(i);
                            return <SeleItem key={'sele_b_i' + i} hasCho={hasCho != -1 ? " lg_sele_item_muilt_cho" : ""} attr={props.attr} data={o} index={i} handSele={that.handSele}  />
                        })
                    }
                  </ScrollView>
                    <View>
                        <View className="lg_sele_muilt_btn">
                            <LgButton type="D" onClick={this.closeSele.bind(this)}>取消</LgButton>
                        </View>
                        <View className="lg_sele_muilt_btn">
                            <LgButton type="B" onClick={this.surePage.bind(this)}>确定</LgButton>
                        </View>
                    </View>
                </View>
              </View>
            </View>
        </View>
      )
    
  }
}
interface ItemProps {
    hasCho?: string,
    attr?: string,
    data: any,
    index: number,
    handSele: (index: number, type?: string) => void
}
function SeleItem(props: ItemProps) {
    const handSele = ()=> {
        props.handSele(props.index, props.hasCho);
    }
    return (
        <View className={`lg_sele_item_muilt ${props.hasCho}`} onClick={handSele}>
            {props.attr ? props.data[props.attr] : props.data}
        </View>
    )
}